# 需求详情页 - TAPD需求文档

需求背景（补充业务场景与触发原因）：

后台管理系统需要提供需求详情查看和管理功能，让管理员能够查看需求的完整信息，包括需求基本信息、处理进度、沟通记录、相关报价、相关协议等，并能够对需求进行管理操作，如创建报价、创建协议、添加沟通记录、转换状态、添加内部备注等。需求详情页是需求管理的核心页面之一，管理员从需求列表页点击查看详情后进入此页面。该页面为业务团队提供需求的全方位信息展示和管理工具，支持需求从提交到完成的全生命周期管理，提升需求处理效率和业务转化率。



需求价值（补充对业务的价值）：

1. **全面展示需求信息**：通过需求详情页，管理员可以查看需求的完整信息，包括需求标题、状态、编号、客户信息、需求描述、处理进度、沟通记录、相关报价、相关协议等，全面了解需求的当前状态和历史记录。
2. **支持需求状态管理**：通过状态转换功能，管理员可以灵活调整需求状态，跟踪需求从提交到完成的整个生命周期，确保需求处理流程的规范性。状态包括：已提交、评估中、已报价、已签约、实施中、已完成。
3. **支持报价管理**：管理员可以在需求详情页直接创建报价，关联到当前需求，并查看该需求的所有相关报价，便于报价管理和跟踪。
4. **支持协议管理**：管理员可以在需求详情页创建协议，关联到相关报价，支持上传协议文件或填写腾讯电子签合同链接，并查看该需求的所有相关协议，便于协议管理和跟踪。
5. **支持沟通记录管理**：管理员可以添加和管理与客户的沟通记录，记录沟通方式、沟通内容、下次跟进时间等，便于跟踪客户沟通历史和制定跟进计划。
6. **支持内部备注管理**：管理员可以添加内部备注，记录重要信息、注意事项等，便于团队内部信息共享和协作。
7. **处理进度可视化**：通过时间线形式展示需求的处理进度，清晰展示需求从提交到当前状态的所有关键节点，包括操作人、操作时间等信息。
8. **提升工作效率**：通过集中展示需求的所有相关信息和管理功能，管理员无需在多个页面间跳转，即可完成需求管理的各项操作，大幅提升工作效率。



需求目标（说明该需求要解决的问题或达成的目标）：

1. **展示需求基本信息**：清晰展示需求标题、状态标签、优先级标签、需求编号、客户信息、需求描述、提交时间、最后更新时间、处理顾问、优先级、预计完成时间、需求来源等基本信息。
2. **展示处理进度时间线**：以时间线形式展示需求的处理进度，包括已提交、评估中、已报价、已签约、实施中、已完成等关键节点，每个节点显示状态名称、状态说明、操作时间、操作人等信息。
3. **支持状态转换**：提供状态转换功能，允许管理员将需求状态在已提交、评估中、已报价、已签约、实施中、已完成之间转换。
4. **支持创建报价**：提供创建报价功能，允许管理员为当前需求创建报价，包括设置有效期、添加报价明细（项目名称、数量、单价）、填写备注说明等。
5. **支持查看相关报价**：展示该需求的所有相关报价，包括报价编号、状态、金额、报价时间等信息，支持点击查看报价详情。
6. **支持创建协议**：提供创建协议功能，允许管理员为当前需求创建协议，包括选择关联报价、上传协议文件或填写腾讯电子签合同链接、填写协议说明等。
7. **支持查看相关协议**：展示该需求的所有相关协议，包括协议编号、状态、关联报价、文件信息、上传时间等信息，支持查看和下载协议。
8. **支持沟通记录管理**：展示该需求的所有沟通记录，包括沟通人、沟通时间、沟通内容等信息，支持添加新的沟通记录，包括选择沟通方式、填写沟通内容、设置下次跟进时间等。
9. **支持内部备注管理**：展示该需求的所有内部备注，包括备注人、备注时间、备注内容、重要程度等信息，支持添加新的内部备注。
10. **支持复制需求编号**：提供复制需求编号功能，方便管理员快速复制需求编号用于其他用途。
11. **支持返回列表**：提供返回按钮，方便管理员返回需求列表页。



用户故事（不同的视角下，希望的结果）：

**作为管理员，我希望：**
- 能够查看需求的完整信息，包括需求标题、状态、编号、客户信息、需求描述、处理进度、沟通记录、相关报价、相关协议等。
- 能够通过时间线形式查看需求的处理进度，了解需求从提交到当前状态的所有关键节点。
- 能够转换需求状态，将需求状态在已提交、评估中、已报价、已签约、实施中、已完成之间转换。
- 能够为需求创建报价，包括设置有效期、添加报价明细、填写备注说明等。
- 能够查看需求的所有相关报价，包括报价编号、状态、金额、报价时间等信息，并能够点击查看报价详情。
- 能够为需求创建协议，包括选择关联报价、上传协议文件或填写腾讯电子签合同链接、填写协议说明等。
- 能够查看需求的所有相关协议，包括协议编号、状态、关联报价、文件信息、上传时间等信息，并能够查看和下载协议。
- 能够查看需求的所有沟通记录，了解与客户的沟通历史。
- 能够添加新的沟通记录，记录沟通方式、沟通内容、下次跟进时间等。
- 能够查看需求的所有内部备注，了解团队内部的重要信息和注意事项。
- 能够添加新的内部备注，记录重要信息、注意事项等。
- 能够快速复制需求编号，用于其他用途。
- 能够通过返回按钮返回需求列表页。

**作为业务顾问，我希望：**
- 能够快速查看分配给自己的需求的详细信息，了解需求的当前状态和历史记录。
- 能够快速转换需求状态，标记需求的处理进度。
- 能够为需求创建报价，向客户提供报价方案。
- 能够查看需求的所有相关报价，了解报价状态和客户反馈。
- 能够为需求创建协议，关联到相关报价，支持上传协议文件或填写腾讯电子签合同链接。
- 能够查看需求的所有相关协议，了解协议状态和签署情况。
- 能够记录与客户的沟通记录，便于跟踪客户沟通历史和制定跟进计划。
- 能够查看和添加内部备注，记录重要信息和注意事项，便于团队协作。

**作为产品经理，我希望：**
- 需求详情页功能完整，能够满足管理员和业务顾问的日常需求管理需求。
- 需求信息展示清晰，便于用户快速了解需求的完整信息。
- 处理进度时间线清晰直观，便于用户了解需求的处理历史。
- 状态转换功能简单直观，降低用户的操作成本，减少操作错误。
- 创建报价和创建协议功能流程清晰，支持多种方式（文件上传、电子签链接），满足不同业务场景。
- 沟通记录和内部备注功能便于信息记录和团队协作。
- 页面性能良好，即使数据量较大时也能流畅使用。

**作为业务方，我希望：**
- 通过需求详情页，业务团队能够全面了解每个需求的详细信息，提升需求处理效率。
- 通过状态转换功能，业务团队能够更好地跟踪需求进度，确保需求处理流程的规范性。
- 通过报价和协议管理功能，业务团队能够高效管理报价和协议，提升业务转化率。
- 通过沟通记录和内部备注功能，业务团队能够更好地记录和共享信息，提升团队协作效率。



需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

**1. 页面布局结构**
- 页面采用垂直布局，包含以下主要区域（从上到下）：
  - 返回按钮和标题栏（包含返回按钮、"需求详情"标题、创建报价按钮、转换状态按钮）
  - 需求基本信息卡片（包含需求标题、状态、编号、客户信息、需求描述、时间信息等）
  - 处理进度时间线区域（展示需求的处理进度）
  - 沟通记录区域（展示和添加沟通记录）
  - 相关报价区域（展示和创建相关报价）
  - 相关协议区域（展示和创建相关协议）
  - 内部备注区域（展示和添加内部备注）

**2. 返回按钮和标题栏**
- 左侧显示返回按钮（左箭头图标），点击返回上一页（需求列表页）
- 中间显示"需求详情"标题，字体较大（text-2xl），加粗显示
- 右侧显示操作按钮：
  - "创建报价"按钮：绿色背景（green-600），点击打开创建报价模态框
  - "转换状态"按钮：靛蓝色背景（indigo-600），点击打开转换状态模态框

**3. 需求基本信息卡片**
- **需求标题和状态**：
  - 显示需求标题，字体较大（text-2xl），加粗显示，颜色为靛蓝色（indigo-600）
  - 显示处理状态标签，不同状态不同颜色：
    - 已提交：黄色背景（yellow-100），黄色文字（yellow-600）
    - 评估中：蓝色背景（blue-100），蓝色文字（blue-600）
    - 已报价：靛蓝色背景（indigo-100），靛蓝色文字（indigo-600）
    - 已签约：紫色背景（purple-100），紫色文字（purple-600）
    - 实施中：青色背景（cyan-100），青色文字（cyan-600）
    - 已完成：绿色背景（green-100），绿色文字（green-600）
  - 显示优先级标签（如有），不同优先级不同颜色：
    - 紧急：红色背景（red-100），红色文字（red-600）
    - 高：橙色背景（orange-100），橙色文字（orange-600）
    - 中：灰色背景（gray-100），灰色文字（gray-600）
    - 低：蓝色背景（blue-100），蓝色文字（blue-600）
- **需求编号**：
  - 显示需求编号，格式："REQ" + 日期 + 序号（如：REQ20240120001）
  - 提供复制按钮（复制图标），点击复制需求编号到剪贴板
- **客户信息**：
  - 显示客户头像图标（圆形背景，indigo颜色）
  - 显示客户名称
  - 显示客户联系电话（部分隐藏，如：138****8888）
  - 显示业务类型标签（如：企业服务）
  - 显示需求来源（如：来自线索：AI智能报价），支持点击跳转到线索列表页
- **需求描述**：
  - 显示需求描述的完整内容，支持多行显示
- **时间信息**：
  - 显示提交时间，格式："YYYY-MM-DD HH:mm"
  - 显示最后更新时间，格式："YYYY-MM-DD HH:mm"
  - 显示处理顾问，支持点击跳转到顾问详情页
  - 显示优先级标签
  - 显示预计完成时间，格式："YYYY-MM-DD"
  - 显示需求来源，支持点击跳转到线索列表页

**4. 处理进度时间线区域**
- **时间线展示**：
  - 以垂直时间线形式展示需求的处理进度
  - 每个进度节点包含：
    - 状态图标（圆形，不同状态不同颜色）：
      - 已完成状态：绿色背景（green-500），白色对勾图标
      - 进行中状态：蓝色背景（blue-500），白色旋转图标
    - 状态名称（加粗显示）
    - 状态说明（灰色文字）
    - 操作时间，格式："YYYY-MM-DD HH:mm | 操作人：XXX"
  - 节点之间用竖线连接，已完成节点用绿色竖线，进行中节点用灰色竖线
- **进度节点类型**：
  - 已提交：客户提交需求，等待顾问处理
  - 评估中：顾问正在评估需求，进行需求分析和技术方案设计
  - 已报价：已向客户提交报价，等待客户确认
  - 已签约：报价已确认，合同已签署
  - 实施中：合同已签署，项目正在实施中
  - 已完成：项目已完成交付

**5. 沟通记录区域**
- **沟通记录列表**：
  - 显示该需求的所有沟通记录
  - 每条记录包含：
    - 沟通人头像图标（圆形背景，不同角色不同颜色）：
      - 顾问：靛蓝色背景（indigo-100），靛蓝色图标
      - 客户：蓝色背景（blue-100），蓝色图标
    - 沟通人名称和角色（如：李顾问、张三（客户））
    - 沟通时间，格式："YYYY-MM-DD HH:mm"
    - 沟通内容（灰色背景区域，支持多行显示）
- **添加沟通记录按钮**：
  - 区域右上角显示"添加记录"按钮，点击打开添加沟通记录模态框
- **添加沟通记录模态框**：
  - 显示半透明遮罩层，弹窗居中显示
  - 弹窗标题："添加沟通记录"
  - 弹窗右上角有关闭按钮（X图标），点击可关闭弹窗
  - 表单字段：
    - 沟通方式（必填）：下拉选择，选项包括：电话、微信、邮件、面访、其他
    - 沟通内容（必填）：多行文本输入框
    - 下次跟进时间（可选）：日期时间选择器
  - 表单底部显示"取消"和"保存"按钮
  - 点击"保存"按钮，提交沟通记录，关闭弹窗，刷新沟通记录列表
  - 点击"取消"按钮或关闭按钮，关闭弹窗，不保存数据

**6. 相关报价区域**
- **报价列表**：
  - 显示该需求的所有相关报价
  - 每条报价以卡片形式展示，包含：
    - 报价编号（加粗显示）
    - 报价状态标签：
      - 待确认：黄色背景（yellow-100），黄色文字（yellow-600）
      - 已确认：绿色背景（green-100），绿色文字（green-600）
      - 已拒绝：红色背景（red-100），红色文字（red-600）
    - 报价金额（大号字体，靛蓝色，加粗显示）
    - 报价时间，格式："报价于 YYYY-MM-DD HH:mm"
    - 右侧显示右箭头图标，表示可点击查看详情
  - 点击报价卡片，跳转到报价详情页（quotation-detail.html?id=x）
- **创建报价按钮**：
  - 区域右上角显示"创建报价"按钮，点击打开创建报价模态框
- **创建报价模态框**：
  - 显示半透明遮罩层，弹窗居中显示，最大宽度800px
  - 弹窗标题："创建报价"
  - 弹窗右上角有关闭按钮（X图标），点击可关闭弹窗
  - 表单字段：
    - 有效期至（必填）：日期选择器，默认值为当前日期+30天
    - 关联需求（只读）：显示当前需求标题
    - 报价明细（必填）：表格形式，包含以下列：
      - 项目名称（文本输入框）
      - 数量（数字输入框，默认值为1，最小值为1）
      - 单价（数字输入框，最小值为0，支持小数）
      - 小计（自动计算，数量 × 单价）
      - 操作（删除按钮）
    - 表格底部显示合计金额（自动计算所有明细的小计之和）
    - 提供"添加项目"按钮，点击添加新的报价明细行
    - 备注说明（可选）：多行文本输入框
  - 表单底部显示"取消"和"创建报价"按钮
  - 点击"创建报价"按钮，提交报价数据，关闭弹窗，刷新相关报价列表
  - 点击"取消"按钮或关闭按钮，关闭弹窗，不保存数据
  - 报价明细计算规则：
    - 修改数量或单价时，自动计算小计（数量 × 单价）
    - 修改任何明细时，自动更新合计金额（所有明细小计之和）
    - 金额显示格式：¥X,XXX.XX（千分位，保留两位小数）

**7. 相关协议区域**
- **协议列表**：
  - 显示该需求的所有相关协议
  - 每条协议以卡片形式展示，包含：
    - 协议图标（方形背景，不同状态不同颜色）：
      - 待签署：红色背景（red-100），红色图标
      - 已签署：绿色背景（green-100），绿色图标
    - 协议编号（加粗显示）
    - 协议状态标签：
      - 待签署：黄色背景（yellow-100），黄色文字（yellow-600）
      - 已签署：绿色背景（green-100），绿色文字（green-600）
    - 关联报价信息：显示"关联报价：QT编号 (金额)"
    - 文件信息：显示文件名称和大小（如：服务协议.pdf (2.5MB)）
    - 上传时间，格式："上传于 YYYY-MM-DD HH:mm"
    - 上传顾问：显示顾问名称
    - 签署时间（如已签署）：显示"签署于 YYYY-MM-DD HH:mm"，绿色文字
    - 操作按钮：查看按钮、下载按钮
  - 点击协议卡片，跳转到协议详情页（agreement-detail.html?id=x）
- **创建协议按钮**：
  - 区域右上角显示"创建协议"按钮，点击打开创建协议模态框
- **创建协议模态框**：
  - 显示半透明遮罩层，弹窗居中显示，最大宽度800px
  - 弹窗标题："创建协议"
  - 弹窗右上角有关闭按钮（X图标），点击可关闭弹窗
  - 表单字段：
    - 关联报价（必填）：下拉选择，选项包括该需求的所有相关报价（格式：QT编号 - 金额 (状态)）
    - 上传协议文件（可选）：文件上传区域，支持拖拽上传，支持格式：PDF、DOC、DOCX，最大10MB
      - 上传后显示文件信息（文件名称、文件大小）和删除按钮
    - 腾讯电子签合同链接（可选）：URL输入框，占位符提示链接格式
      - 显示使用说明提示框，说明如何使用腾讯电子签
    - 协议说明（必填）：多行文本输入框，占位符提示包含服务内容、服务期限、付款方式等
      - 显示建议提示：建议包含服务内容、服务期限、付款方式、交付标准等
    - 提示信息框：说明至少需要填写"关联报价"和"协议说明"，如果使用腾讯电子签请填写链接，如果使用传统方式可以上传文件
  - 表单底部显示"取消"和"创建协议"按钮
  - 点击"创建协议"按钮，验证必填项：
    - 必须选择关联报价
    - 必须填写协议说明
    - 如果既没有上传文件也没有填写电子签链接，显示确认对话框
    - 如果填写了电子签链接，验证URL格式
    - 验证通过后，显示确认对话框，确认后提交协议数据，关闭弹窗，刷新相关协议列表
  - 点击"取消"按钮或关闭按钮，关闭弹窗，不保存数据

**8. 内部备注区域**
- **内部备注列表**：
  - 显示该需求的所有内部备注
  - 每条备注以卡片形式展示，包含：
    - 备注人名称
    - 备注时间，格式："YYYY-MM-DD HH:mm"
    - 重要程度标签（如有）：黄色背景（yellow-100），黄色文字（yellow-600），显示"重要"
    - 备注内容（灰色背景区域，支持多行显示）
- **添加备注按钮**：
  - 区域右上角显示"添加备注"按钮，点击打开添加备注模态框（待实现，当前显示提示）

**9. 转换状态功能**
- **打开转换状态模态框**：
  - 点击标题栏的"转换状态"按钮，弹出转换状态模态框
  - 模态框显示半透明遮罩层，弹窗居中显示
  - 弹窗右上角有关闭按钮（X图标），点击可关闭弹窗
  - 模态框显示当前状态（带状态标签样式）
- **状态选项**：
  - 提供状态选择：已提交、评估中、已报价、已签约、实施中、已完成
  - 每个状态选项显示状态标签和状态说明：
    - 已提交：客户已提交需求，等待顾问处理
    - 评估中：顾问正在评估需求，进行需求分析和技术方案设计
    - 已报价：已向客户提交报价，等待客户确认
    - 已签约：报价已确认，合同已签署
    - 实施中：合同已签署，项目正在实施中
    - 已完成：项目已完成交付
  - 当前状态选项禁用，不可选择，显示为灰色且不可点击（opacity-50，cursor-not-allowed）
  - 其他状态选项可点击选择，选中后高亮显示（indigo-500边框，indigo-50背景）
- **状态转换**：
  - 选择新状态后，点击"确认转换"按钮，更新需求状态
  - 转换成功后，更新需求基本信息卡片的状态标签
  - 更新处理进度时间线，添加新的进度节点
  - 显示成功提示
  - 关闭模态框
- **取消操作**：
  - 点击"取消"按钮或关闭按钮，关闭弹窗，不保存数据

**10. 数据加载规则**
- 页面加载时，根据URL参数中的需求ID（如：requirement-detail.html?id=req1），调用后端接口获取需求详情数据
- 加载需求基本信息、处理进度、沟通记录、相关报价、相关协议、内部备注等数据
- 如果需求ID不存在或无效，显示错误提示，可返回需求列表页

**11. 空状态处理**
- 当沟通记录为空时，显示空状态提示："暂无沟通记录"
- 当相关报价为空时，显示空状态提示："暂无相关报价"
- 当相关协议为空时，显示空状态提示："暂无相关协议"
- 当内部备注为空时，显示空状态提示："暂无内部备注"

**12. 异常处理**
- 如果后端接口请求失败，显示友好的错误提示
- 如果需求不存在，显示错误提示，提供返回需求列表页的链接
- 确保页面在各种异常情况下都能正常显示基本内容

**13. 响应式设计**
- 页面支持响应式布局，适配不同屏幕尺寸
- 移动端优化：卡片垂直布局，按钮全宽显示
- 移动端优化：模态框宽度和高度适配屏幕，支持滚动

**14. 交互体验**
- 卡片和按钮支持hover效果
- 模态框打开和关闭动画流畅
- 复制需求编号功能正常，显示成功提示
- 报价明细计算实时更新，响应及时
- 文件上传支持拖拽，交互友好



验收标准（列出明确、可验证的交付标准）：

**1. 页面布局验收**
- [ ] 返回按钮和标题栏正确显示，布局合理
- [ ] 需求基本信息卡片正确显示，包含所有必需信息
- [ ] 处理进度时间线区域正确显示，时间线格式正确
- [ ] 沟通记录区域正确显示，布局合理
- [ ] 相关报价区域正确显示，布局合理
- [ ] 相关协议区域正确显示，布局合理
- [ ] 内部备注区域正确显示，布局合理

**2. 需求基本信息展示验收**
- [ ] 需求标题正确显示，字体大小和样式符合设计要求
- [ ] 处理状态标签正确显示，颜色和样式符合设计要求
- [ ] 优先级标签正确显示（如有），颜色和样式符合设计要求
- [ ] 需求编号正确显示，格式正确
- [ ] 复制需求编号功能正常，点击后正确复制到剪贴板，显示成功提示
- [ ] 客户信息正确显示：客户头像图标、客户名称、联系电话、业务类型、需求来源
- [ ] 需求描述正确显示，支持多行显示
- [ ] 时间信息正确显示：提交时间、最后更新时间、处理顾问、优先级、预计完成时间、需求来源

**3. 处理进度时间线验收**
- [ ] 时间线正确显示，格式正确
- [ ] 进度节点正确显示，包含状态图标、状态名称、状态说明、操作时间、操作人
- [ ] 状态图标颜色正确：已完成状态为绿色，进行中状态为蓝色
- [ ] 节点之间的竖线正确显示：已完成节点用绿色竖线，进行中节点用灰色竖线
- [ ] 进度节点按时间顺序正确排列

**4. 沟通记录功能验收**
- [ ] 沟通记录列表正确显示，包含所有必需信息：沟通人头像、沟通人名称、沟通时间、沟通内容
- [ ] 沟通人头像颜色正确：顾问为靛蓝色，客户为蓝色
- [ ] "添加记录"按钮正确显示，点击后正确打开添加沟通记录模态框
- [ ] 添加沟通记录模态框正确显示，表单字段完整
- [ ] 沟通方式下拉选择正确，选项包括：电话、微信、邮件、面访、其他
- [ ] 沟通内容和下次跟进时间输入框正确显示
- [ ] 点击"保存"按钮，正确提交沟通记录，关闭弹窗，刷新沟通记录列表
- [ ] 点击"取消"按钮或关闭按钮，正确关闭弹窗，不保存数据

**5. 相关报价功能验收**
- [ ] 报价列表正确显示，包含所有必需信息：报价编号、报价状态、报价金额、报价时间
- [ ] 报价状态标签正确显示，颜色和样式符合设计要求
- [ ] 点击报价卡片，正确跳转到报价详情页
- [ ] "创建报价"按钮正确显示，点击后正确打开创建报价模态框
- [ ] 创建报价模态框正确显示，表单字段完整
- [ ] 有效期至日期选择器正确显示，默认值为当前日期+30天
- [ ] 关联需求字段正确显示，只读状态
- [ ] 报价明细表格正确显示，包含所有必需列：项目名称、数量、单价、小计、操作
- [ ] "添加项目"按钮正确显示，点击后正确添加新的报价明细行
- [ ] 删除按钮正确显示，点击后正确删除对应的报价明细行
- [ ] 报价明细计算正确：修改数量或单价时，自动计算小计；修改任何明细时，自动更新合计金额
- [ ] 金额显示格式正确：¥X,XXX.XX（千分位，保留两位小数）
- [ ] 点击"创建报价"按钮，正确提交报价数据，关闭弹窗，刷新相关报价列表
- [ ] 点击"取消"按钮或关闭按钮，正确关闭弹窗，不保存数据

**6. 相关协议功能验收**
- [ ] 协议列表正确显示，包含所有必需信息：协议图标、协议编号、协议状态、关联报价、文件信息、上传时间、上传顾问、签署时间（如已签署）
- [ ] 协议图标颜色正确：待签署为红色，已签署为绿色
- [ ] 协议状态标签正确显示，颜色和样式符合设计要求
- [ ] 点击协议卡片，正确跳转到协议详情页
- [ ] "查看"和"下载"按钮正确显示，功能正常
- [ ] "创建协议"按钮正确显示，点击后正确打开创建协议模态框
- [ ] 创建协议模态框正确显示，表单字段完整
- [ ] 关联报价下拉选择正确，选项包括该需求的所有相关报价
- [ ] 文件上传区域正确显示，支持拖拽上传
- [ ] 文件上传限制正确：支持格式PDF、DOC、DOCX，最大10MB
- [ ] 上传文件后，正确显示文件信息和删除按钮
- [ ] 腾讯电子签合同链接输入框正确显示，占位符提示正确
- [ ] 使用说明提示框正确显示
- [ ] 协议说明输入框正确显示，占位符提示正确
- [ ] 提示信息框正确显示
- [ ] 点击"创建协议"按钮，正确验证必填项：
  - 必须选择关联报价
  - 必须填写协议说明
  - 如果既没有上传文件也没有填写电子签链接，显示确认对话框
  - 如果填写了电子签链接，验证URL格式
- [ ] 验证通过后，正确显示确认对话框，确认后提交协议数据，关闭弹窗，刷新相关协议列表
- [ ] 点击"取消"按钮或关闭按钮，正确关闭弹窗，不保存数据

**7. 内部备注功能验收**
- [ ] 内部备注列表正确显示，包含所有必需信息：备注人名称、备注时间、重要程度标签（如有）、备注内容
- [ ] "添加备注"按钮正确显示（当前显示提示，待实现）

**8. 转换状态功能验收**
- [ ] 点击"转换状态"按钮，正确弹出转换状态模态框
- [ ] 模态框显示半透明遮罩层，弹窗居中显示
- [ ] 模态框显示当前状态，当前状态选项禁用
- [ ] 状态选项正确显示，包含状态标签和状态说明
- [ ] 选择新状态后，点击"确认转换"按钮，正确更新需求状态
- [ ] 转换成功后，正确更新需求基本信息卡片的状态标签
- [ ] 正确更新处理进度时间线，添加新的进度节点
- [ ] 显示成功提示
- [ ] 点击"取消"按钮或关闭按钮，正确关闭弹窗，不保存数据

**9. 数据加载验收**
- [ ] 页面加载时，正确根据URL参数中的需求ID调用后端接口获取需求详情数据
- [ ] 需求基本信息、处理进度、沟通记录、相关报价、相关协议、内部备注等数据正确显示
- [ ] 如果需求ID不存在或无效，正确显示错误提示，提供返回需求列表页的链接

**10. 空状态处理验收**
- [ ] 沟通记录为空时，正确显示空状态提示："暂无沟通记录"
- [ ] 相关报价为空时，正确显示空状态提示："暂无相关报价"
- [ ] 相关协议为空时，正确显示空状态提示："暂无相关协议"
- [ ] 内部备注为空时，正确显示空状态提示："暂无内部备注"

**11. 异常处理验收**
- [ ] 后端接口请求失败时，显示友好的错误提示
- [ ] 需求不存在时，显示错误提示，提供返回需求列表页的链接
- [ ] 页面在各种异常情况下都能正常显示基本内容

**12. 响应式设计验收**
- [ ] 页面支持响应式布局，适配不同屏幕尺寸
- [ ] 移动端优化：卡片垂直布局，按钮全宽显示
- [ ] 移动端优化：模态框宽度和高度适配屏幕，支持滚动

**13. 交互体验验收**
- [ ] 卡片和按钮支持hover效果，交互反馈正常
- [ ] 模态框打开和关闭动画流畅
- [ ] 复制需求编号功能正常，显示成功提示
- [ ] 报价明细计算实时更新，响应及时
- [ ] 文件上传支持拖拽，交互友好
- [ ] 页面加载流畅，无卡顿现象

**14. 性能要求**
- [ ] 页面加载时间不超过2秒
- [ ] 模态框打开和关闭响应及时，无延迟感
- [ ] 报价明细计算响应及时，无延迟感
- [ ] 数据刷新响应及时，无延迟感